<template>
  <div>
    <div class="header" style="height: 46px;
    overflow: hidden;position: absolute;
    width: 100%;
    z-index: 1;
    top: 0;
    background: #fff;
    line-height: 46px;">
      <div class="icon" @click="fanhui" style="position: fixed; left:16px; font-size:14px; color:#1989fa;">
        <van-icon name="arrow-left"/>
      </div>
      <p style="margin: 0; padding: 0;">编辑小孩信息</p>
    </div>
    <div style="background: #f2f2f2; text-align: -webkit-left;color: #323233; font-size: 14px; position: relative; top: 46px;">
    <ul>
      <li>姓名<input ref="name" value="" class="input" type="text" placeholder="请输入小孩的姓名"/></li>
      <li style="padding-left: 0px;">
        <van-cell is-link @click="showPopup">性别
          <p style="position: relative; top: -38px; left: 50px;">{{sex}}</p>
        </van-cell>
      </li>
      <li style="width: 45%;float: left;">
        身高<input class="input" ref="name1" type="text" style="position: relative; width:40%;" />cm
      </li>
      <li>体重<input class="input" ref="name2" type="text" style="position: relative; width:40%;" />kg</li>
      <li>胸围<input class="input" ref="name3" type="text" /></li>
      <li>腰围<input class="input" ref="name4" type="text" /></li>
      <li>臀围<input class="input" ref="name5" type="text" /></li>
    </ul>
    </div>
    <van-popup v-model="show" position="bottom" style="height: 88px;">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="男" clickable @click="radio = '1'">
            <van-radio slot="right-icon" name="1" />
          </van-cell>
          <van-cell title="女" clickable @click="radio = '2'">
            <van-radio slot="right-icon" name="2" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
    <van-button type="primary" size="large" @click="handclick" style="position: absolute; bottom: 0px; left: 0; z-index: 100; background: red; border: red;">
    确定
    </van-button>
  </div>
</template>

<script>
export default {
  name: 'addChild',
  data () {
    return {
      show: false,
      radio: '1',
      sex: '男',
      val: []
    }
  },
  methods: {
    fanhui () {
      this.$router.go(-1)
    },
    showPopup () {
      this.show = true
    },
    handclick () {
      this.val.push(this.$refs.name.value, this.$refs.name1.value, this.$refs.name2.value, this.$refs.name3.value, this.$refs.name4.value, this.$refs.name5.value)
      for (let i = 0; i < this.val.length; i++) {
        if (this.val[i] === '' && i === 0) {
          alert('请输入姓名')
          this.val = []
          break
        } else if (this.val[i] === '' && i === 1) {
          alert('请输入身高')
          this.val = []
          break
        } else if (this.val[i] === '' && i === 2) {
          alert('请输入体重')
          this.val = []
          break
        } else if (this.val[i] === '' && i === 3) {
          alert('请输入胸围')
          this.val = []
          break
        } else if (this.val[i] === '' && i === 4) {
          alert('请输入腰围')
          this.val = []
          break
        } else if (this.val[i] === '' && i === 5) {
          alert('请输入臀围')
          this.val = []
          break
        } else if (this.val[i] !== '' && i === 5) {
          alert(this.val)
          this.val = []
        }
      }
    }
  },
  watch: {
    radio (title) {
      this.show = false
      console.log(title)
      if (title === '1') {
        this.sex = '男'
      } else {
        this.sex = '女'
      }
    }
  }
}
</script>
<style scoped>
li{
height: 2.5rem;
line-height: 2.5rem;
padding-left: 16px;
background: #fff;
margin-top:0px;
overflow: hidden;
border: 1px solid #f2f2f2;
}
.input{
margin-left: 20px;
border: none;
height: 2rem;
}
</style>
